const gulp = require('gulp')
const browserSync = require('browser-sync')
const del = require('del')
// 用于仅传递比相应的目标文件更新的源文件。
const newer = require('gulp-newer')
// css自动前缀
const autoprefixer = require('gulp-autoprefixer')
const sourcemaps = require('gulp-sourcemaps')
// 替换链接
const revCollector = require('gulp-rev-collector')
// 任务执行器
const runSequence = require('run-sequence')
const gulpLoadPlugins = require('gulp-load-plugins')
const $ = gulpLoadPlugins()

/*const browsers = [
    'ie >= 8',
    'ie_mob >= 8',
    'ff >= 20',
    'chrome >= 30',
    'safari >= 7',
    'opera >= 20',
    'ios >= 5',
    'android >= 4.4',
    'bb >= 10'
]*/
const browsers = ['last 5 versions']

gulp.task('css', () => {
    return gulp.src([
        'src/css/**/*.scss',
        'src/css/**/*.css'
    ])
    .pipe(newer('.tmp/css'))
    .pipe(sourcemaps.init())
    // 自动前缀
    .pipe(autoprefixer(browsers))
    // 保存每个独立css
    .pipe(gulp.dest('.tmp/css'))
    .pipe($.concat('all.css'))
    .pipe($.cssnano())
    .pipe($.rename('all.min.css'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('.tmp/css'))
});

gulp.task('build:css', () => {
    return gulp.src([
        'src/css/**/*.css'
    ])
    .pipe(sourcemaps.init())
    .pipe(autoprefixer({
        browsers,
        // 美化css
        cascade: true
    }))
    // 保存每个独立的css文件
    .pipe(gulp.dest('dist/css'))
    // .pipe($.size({title: 'css'}))
    // 合并
    .pipe($.concat('all.css'))
    // 压缩（压缩成一行）
    .pipe($.cssnano())
    .pipe($.rename('all.min.css'))
    .pipe(sourcemaps.write('./'))
    // 文件名添加md5后缀
    .pipe($.rev())
    .pipe(gulp.dest('dist/css'))
    // 生成一个rev-manifest.json
    .pipe($.rev.manifest())
    // 保存rev-manifest.json
    .pipe(gulp.dest('dist/rev/css'))
})

var html = 'src/**/*.html'
gulp.task('html', () => {
    gulp.src([html])
    .pipe(newer('.tmp'))
    .pipe(gulp.dest('.tmp'))
})
gulp.task('build:html', () => {
    return gulp.src([html])
    .pipe($.revReplace({manifest: gulp.src('./dist/rev/css/rev-manifest.json')}))
    .pipe(gulp.dest('dist'))
})


gulp.task('js', () => {
    return gulp.src('src/**/*.js')
    .pipe(gulp.dest('.tmp/js'))
})

gulp.task('build:js', () => {
    return gulp.src('src/**/*.js')
    .pipe(gulp.dest('dist/js'))
})

gulp.task('clean', () => del(['.tmp', 'dist/*', '!dist/.git'], {dot: true}))
gulp.task('clean:.tmp', () => del(['.tmp'], {dot: true}))
gulp.task('clean:dist', () => del(['dist/*'], {dot: true}))

gulp.task('watch', ['clean:.tmp'], () => {
    runSequence(['html', 'css', 'js'])
    gulp.watch(['src/**/*.html'], ['html', browserSync.reload])
    gulp.watch(['src/css/**/*.css'], ['css', browserSync.reload])
    gulp.watch(['src/**/*.js'], ['js', browserSync.reload])
    // gulp.watch(['src/images/**/*'], browserSync.reload)
})

gulp.task('serve', () => {
    browserSync({
        notify: false,
        logPrefix: 'i',
        // 允许滚动在断点之间同步
        scrollElementMapping: ['main', '.mdl-layout'],
        // https: true,
        server: ['.tmp'],
        port: 3003
    })

    runSequence(['watch'])
})
gulp.task('serve:dist', ['build'], () => {
    browserSync({
        notify: false,
        logPrefix: 'i',
        // 允许滚动在断点之间同步
        scrollElementMapping: ['main', '.mdl-layout'],
        // https: true,
        server: ['dist'],
        port: 3002
    }) 
})

gulp.task('build', ['clean'], () => {
    runSequence(['build:css', 'build:js'], () => {
        runSequence('build:html')
    })
})

gulp.task('default', () => {
    gulp.run(['serve'])
})


